<template>
  <el-container direction="vertical">
    <el-table
      :data="dataList"
      border
      style="width: 100%"
      size="mini">
      <el-table-column
        prop="title"
        label="标题"
        min-width="15%">
      </el-table-column>
      <el-table-column
        prop="moduleName"
        label="所属模块"
        min-width="15%">
      </el-table-column>
      <el-table-column
        prop="answerNum"
        label="回答数"
        min-width="15%">
      </el-table-column>
      <el-table-column
        prop="solved"
        label="状态"
        :formatter="solvedFormatter"
        min-width="15%">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        min-width="20%">
        <template slot-scope="scope">
          <el-button @click="setSolved(scope.row)" type="text" size="small" v-if="!scope.row.solved">设为已解决</el-button>
          <el-button @click="detail(scope.row)" type="text" size="small">查看</el-button>
          <!--          <el-button type="text" @click="update_(scope.row)" size="small" v-if="scope.row.canOperate">更新</el-button>-->
          <el-button type="text" @click="delete_(scope.row)" size="small" v-if="scope.row.canOperate">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="padding: 10px 10px 5px 10px;"
      :current-page="searchForm.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="searchForm.size"
      layout="total, prev, pager, next, jumper"
      :total="total"
    />
  </el-container>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        dataList: [],
        searchForm: {
          current: 1,
          size: 15,
          keyword: null,
          moduleId: null,
        },
        total: 0,
      }
    },
    created() {
      this.search();
    },
    methods: {
      search() {
        this.$api.currentQuestionPage(this.searchForm).then(res => {
          this.total = res.total;
          this.dataList = res.records;
        })
      },
      solvedFormatter(row, column) {
        if (row.solved) {
          return "已解决";
        }
        return "待解决";
      },
      handleSizeChange(val) {
        this.searchForm.size = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.searchForm.current = val;
        this.search();
      },
      delete_(row) {
        this.$confirm(`确定删除吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.questionDelete(row.id).then(res => {
            this.search();
          })
        })
      },
      detail(row) {
        this.$router.push({name: "QuestionDetail", params: {questionId: row.id}});
      },
      setSolved(row) {
        this.$confirm(`确定设置为已解决吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.questionSolved(row.id).then(res => {
            this.search();
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
